<template>
  <div class="box">
    <div :class="type" class="content">
      <i class="iconfont" :class="typeName"></i>
      <span>{{ message }}</span>
      <b @click="close">X</b>
      <span class="count">{{ count === 1 ? '' : count }}</span>
    </div>
  </div>
</template>

<!-- 
<script setup>
import { computed, defineProps } from 'vue'

const props = defineProps({
  type: {
    type: String
  },
  message: {
    type: String
  },
  close: {
    type: Function
  },
  grouping: {
    type: Boolean,
    default: false
  }
})

const typeName = computed(() => {
  return 'icon-' + props.type
})
</script> -->

<script>
export default {
  data() {
    return {
      count: 1
    }
  },
  props: ['type', 'message', 'close', 'grouping'],
  computed: {
    typeName() {
      return 'icon-' + this.type
    }
  },
  methods: {
    addCounb(){
      this.count++
    }
  }
}
</script>

<style>
.box {
  --successBg: rgba(78, 234, 76);
  --successColor: green;
  --successFont: green;
  --errorBg: rgb(237, 211, 211);
  --errorColor: rgb(214, 6, 6);
  --errorFont: rgb(252, 48, 48);
  --messageBg: rgb(214, 226, 225);
  --messageColor: grey;
  --messageFont: grey;
  --warnBg: rgb(214, 216, 185);
  --warnColor: rgb(118, 110, 5);
  --warnFont: rgb(243, 228, 7);
}


.content.error {
  background-color: var(--errorBg);
  color: var(--errorColor);
}

.content.success {
  background-color: var(--successBg);
  color: var(--successColor);
}

.content.warn {
  background-color: var(--warnBg);
  color: var(--warnColor);
}

.content.message {
  background-color: var(--messageBg);
  color: var(--messageColor);
}



.content {
  border: 1px solid #ccc;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: 20px;
  min-width: 200px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: white;
  border-radius: 10px;
}

.count {
  position: absolute;
  right: 2px;
  top: 2px;
}
</style>


